<template>
  <div>
    <AppHeader></AppHeader>
    <div class="box">
      <input type="text" v-model="name">
      <br>
      <button type="button" name="button" @click="changeName">改名称</button>
    </div>
  </div>
</template>
<script lang="ts">
import { Vue, Component, Emit } from 'vue-property-decorator'
import AppHeader from '@/components/common/AppHeader'

@Component({
  components: {
    AppHeader
  }
})
export default class List extends Vue {
  name = 'defore'
  input = ''

  @Emit()
  speak () {
    console.log(this.name)
  }

  @Emit()
  reset () {
    this.name = 'defore'
  }

  @Emit()
  setName () {
    this.name = this.input
  }

  changeName () {
    this.$store.commit('setUserName', this.name)
  }

  created () {
    // this.speak()
  }
}
</script>
<style lang="scss" scoped>
</style>
